<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        backgroundColor:'#0e1c47',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(255,255,255,0)' // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: 'rgba(255,255,255,1)' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
        },
        grid: {
            top: '18%',
            left: '15%',
            right: '5%',
            bottom: '25%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: 'color:"#092b5d"'
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#24c4ff',
                    margin: 15,
                },
                formatter: function(value) {
                    // return value + "时";
                    return value;
                }
            },
            axisTick: {
                show: false,
            },
            value: []
        }],
        yAxis: [{
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#092b5d'
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#092b5d"
                }

            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#24c4ff',

                },
                formatter: function(value) {
                    return value;
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '注册总量',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 8,
            lineStyle: {
                normal: {
                    color: "#7c80f4", // 线条颜色
                },
                borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
                color: "rgba(14,30,73,1)",
                borderColor: "#646ace",
                borderWidth: 2

            },
            label: {
                normal: {
                    show: true,
                    position: "top",
                    formatter: [
                        ' {a|{c}}',
                    ].join(','),
                    rich: {
                        a: {
                            color: '#fff',
                            align: 'center',
                        },
                    }
                }
            },
            tooltip: {
                show: true
            },
            areaStyle: { //区域填充样式
                normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(124, 128, 244,.3)"
                    },
                        {
                            offset: 1,
                            color: "rgba(124, 128, 244, 0)"
                        }
                    ], false),
                    shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
            },
            value: []
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/api/one1",    //请求url
        value : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                myChart.hideLoading();    //隐藏加载动画
                option.xAxis[0].value = result.categories;
                option.series[0].value = result.datas;
                option.series[0].name = result.name;
                myChart.setOption(option);
                // myChart.setOption({        //加载数据图表
                //     xAxis: {
                //         value: result.categories
                //     },
                //     series: [{
                //         // 根据名字对应到相应的系列
                //         name: '销量',
                //         value: result.datas
                //     }]
                // });
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
